<template>
<div>
  <h4>当前求和为: {{$store.state.sum}}</h4>
  <select v-model="n">
    <option :value="1">1</option>
    <option :value="2">2</option>
    <option :value="3">3</option>
  </select>
  <button @click="increament">+</button>
  <button @click="decreament">-</button>
  <button @click="increamentOdd">当前求和为奇数再加</button>
  <button @click="increamentWait">等一等再加</button>
</div>
</template>

<script>
export default {
  name: 'VuexApp',
  data(){
    return {
      n: 1
    }
  },
  methods: {
    increament(){
      this.$store.commit('PLUS', this.n);
    },
    decreament(){
      this.$store.commit('REDUCE', this.n);
    },
    increamentOdd(){
      this.$store.dispatch('plusOdd', this.n);
    },
    increamentWait(){
      this.$store.dispatch('plusWait', this.n);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  margin-left: 5px;
}
</style>
